<template>
	<view class="pageBg">
		<view class="outBox bg_w margin_b16 flex_c_fs_fs">
			<view class="outBoxHeader margin_b36">
				<text class="f_32 fw_600 tc_1">耗材包选择</text>
			</view>
			<view class="outBoxCnt f_28 fw_500 tc_5 margin_b28 flex_c_fs_fs">
				<text class="margin_b16">耗材名称: {{data.title}}</text>
				<text class="">耗材详情: {{data.desc}}</text>
			</view>
			<view class="outBoxFooter w100 flex_r_sb_c">
				<view class="">
					<text class="f_28 fw_600 tc_1">耗材价格: {{data.uniPrice}}元</text>
				</view>
				<!-- 重要的代码在这里!!! -->
				<view class="pcsSelect flex_r_fs_c">
					<view class="pcsSelectMinus pcsSelectBtn f_48" :class="data.num <= data.atLeast?'unable':'able'" @click.stop="pcsMinus">-</view>
					<view class="pcsSelectNum">{{data.num}}</view>
					<view class="pcsSelectPlus pcsSelectBtn f_48" :class="'able'" @click.stop="pcsPlus">+</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: {
					title: '打针耗材(一)',
					desc: '一次性5ml注册器、碘伏棉签5个、酒精棉签5个、其他',
					uniPrice: 5,
					num: 1,
					atLeast: 1,
				},
			};
		},
		methods: {
			pcsMinus() {
				if(this.data.num <= this.data.atLeast) {
					return
				}
				--this.data.num
			},
			pcsPlus() {
				++this.data.num
			},
		},
	}
</script>

<style lang="scss">
page {
	background-color: #F8F8F8;
	height: 100%;
}
</style>
<style lang="scss" scoped>
.pageBg {
	.outBox {
		width: 100%;
		padding: 32rpx 28rpx;
		box-sizing: border-box;
	}
	.pcsSelect {
		.pcsSelectBtn {
			width: 48rpx;
			height: 48rpx;
			line-height: 40rpx;
			text-align: center;
			box-sizing: border-box;
			border-radius: 8rpx;
		}
		.pcsSelectNum {
			width: 68rpx;
			text-align: center;
		}
		.unable {
			border: 2rpx solid #CCC;
			color: #CCC;
		}
		.able {
			border: 2rpx solid #888;
			color: #888;
		}
	}
}
</style>
